<template>
  <div>
    <el-table
        class="table"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%;header-aline:center"
        @select="handleSum"
        @select-all="handleSum"
        @selection-change="handleSelectionChange">
      >
      <!--复选框-->
      <el-table-column  type="selection" min-width="55"></el-table-column>

      <el-table-column prop ='gimgpath' label="商品预览" min-width="20%">
        <template slot-scope="scope">
          <el-image :src="scope.row.gimgpath[0]"></el-image>
        </template>
      </el-table-column>

      <el-table-column prop="gname" label="商品名称" min-width="10%" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.gname }}
        </template>
      </el-table-column>

          <el-table-column prop="" label="商品状态" min-width="10%" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ state[scope.row.gstate]}}
            </template>
          </el-table-column>

      <el-table-column prop="gprice" label="单价" min-width="10%" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.gprice}}￥</span>
        </template>
      </el-table-column>

      <el-table-column prop="gstorg" label="库存" min-width="10%" show-overflow-tooltip>
        <template slot-scope="scope">
        {{  scope.row.gstorage }}
        </template>
      </el-table-column>

      <el-table-column prop="gnum" label="数量" min-width="20%" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input-number size="mini"  v-model="scope.row.gnum" @change="handleSum" :min="1":max="scope.row.gstorage"></el-input-number>
        </template>
      </el-table-column>

      <el-table-column label="金额" min-width="8%" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ (scope.row.gprice * scope.row.gnum)}}￥</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="15%" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="text" icon="el-icon-star-on" @click="JiaStar(scope.row.gid)">收藏</el-button>
            <el-button type="text" icon="el-icon-delete" @click="deletex(scope.row.gid)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <div style="display: flex;height: 100px">
      <!--      <el-button class='style3' click="toggleSelection()">全选</el-button>-->
            <div class="style1">
              <el-button type="text" icon="el-icon-delete" @click="deletexall()">全部删除</el-button>
            </div>
      <!--      <div class="style1" style="margin-left: 70%">共选<span style="color: red;">{{ count }}</span>件</div>-->
      <div class="style1" style="margin-left: 80%"> 共  <span style="color: red;">{{sum}}</span> ￥</div>
      <el-button type="danger" size="small" class="style2" @click="dialogVisible = true">下单</el-button>
    </div>

    <el-dialog
        title="提交订单"
        :visible.sync="dialogVisible"
        width="45%"
        center>
      <div class="content2">
        <label>姓　　名:</label>
        <input type="text" v-model="bName" @blur="getName" id="bna">
        <span>{{mesName}}</span><br/>
      </div>
      <div class="content2">
        <label>联系电话:</label>
        <input type="text" v-model="bPhone" @blur="getPhone" id="bph">
        <span>{{mesPhone}}</span><br/>
      </div>
      <div class="content2">
        <label>联系地址:</label>
        <input type="text" v-model="bAddress" @blur="getAddress" id="bad">
        <span>{{mesAddress}}</span>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="Order()">提 交</el-button>
    </span>
    </el-dialog>

<!--    <el-dialog-->
<!--        title="订单提交成功!"-->
<!--        style="font-size: larger"-->
<!--        :visible.sync="dialogVisible2"-->
<!--        width="45%"-->
<!--        center>-->
<!--      &lt;!&ndash;    <span><el-image :src="/right.png"></el-image></span>&ndash;&gt;-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="dialogVisible = false;dialogVisible2 = false" style="background:#66b1ff">继续下单</el-button>-->
<!--    <el-button type="primary" @click=" " style="background: greenyellow">前往订单</el-button>-->
<!--    </span>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import {delShopCart, orderShopCart, reqShopCart, reqtokenInfo} from "@/api";
export default {
  name: "ShopCart",
  data(){
    return{
      tableData:[{
        gid: '',
        gimgpath:'',
        gname: '',
        gstate:'',
        gstorage:'',
        gprice: '',
        gnum:'',
      }],
      shopcart_goods:[{
        gid: '',
        gimgpath:'',
        gname: '',
        gstate:'',
        gstorage:'',
        gprice: '',
        gnum:'',
      }],
      state:[
        "冻结",
        "在售",
        "下架"
      ],
      dialogVisible: false,
      dialogVisible2: false,
      bName:'',
      bPhone:'',
      bAddress:'',
      uid:'',
      multipleSelection: [],
      sum:0,
      count:0,
    }
  },
  methods: {
    getShopCart(){
      reqShopCart().then(res=>{
        this.tableData=res.data;
      })
    },
    getUid(){
      reqtokenInfo().then(res=>{
        this.uid=res.data.loginId;
      })
    },
    deletex(gid){
      // alert("mscm dzsmc");
      let data = {
        "gid": gid
      }
      delShopCart(data).then(res=>{
        this.$message({
          message: res.msg,
          type: 'success'
        });
        this.getShopCart();
      })
    },
    //加入收藏夹
    JiaStar(gid){
      let data = {
        "gid": gid
      }
      jiaStar(data).then(res=>{
        this.$message({
          message: res.msg,
          type: 'success'
        });
      })
    },
    // 计算总额
    handleSum() {
      this.sum = 0;
      this.$nextTick(() => {
        // console.log(this.$refs.multipleTable.selection);
        // this.$refs.multipleTable.selection获取被选中的行
        this.$refs.multipleTable.selection.forEach(item => {
          this.sum += (item.gprice * item.gnum);
        });
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    Order(){
      if(this.mesName||this.mesAddress||this.mesPhone){
        alert("用户信息填写不规范，请重新填写!")
      }else{
        const orderData={
          "bname":this.bName,
          "otype":0,
          "bphone":this.bPhone,
          "lease":0,
          "baddress":this.bAddress,
          "cid":this.uid,
          "glist":[],
        }
        this.$refs.multipleTable.selection.forEach(item => {
            orderData.glist.push(
                {
                  gid:item.gid,
                  uid: item.uid,
                  num: item.gnum
                }
            )
        })
        orderShopCart(orderData).then(res =>{
          console.log(orderData);
          console.log(res.data);
          if(res.code==400){
            alert(res.msg)
          }else if(res.code==200){
            const OID = res.data.info.oid
            console.log(OID)
            alert("提交订单成功，即将跳转到订单页面")
            this.$router.push({
              name:'ord',
              query:{
                oid:OID
              }
            })
          }}).catch(error =>{
          console.log(error)
          alert(error.data.msg)
        })
      }},
    getName() {
      if (!this.bName) {
        this.mesName = '用户名不能为空'
      } else {
        this.mesName = ''
      }
    },
    getPhone() {
      if (!this.bPhone) {
        this.mesPhone = '电话号码不能为空'
      } else if(this.bPhone.length!=11){
        this.mesPhone = '电话号码长度必须为11位'
      }else {
        this.mesPhone = ''
      }
    },
    getAddress() {
      if (!this.bAddress) {
        this.mesAddress = '收货地址不能为空'
      } else {
        this.mesAddress = ''
      }
    },
  },
  mounted() {
    this.getShopCart();
    this.getUid();
  }
}
</script>

<style scoped>
.style1{
  float: left;
  width: 100px;
  height: 50px;
  font-family: 黑体;
  font-weight: bolder;
  font-size: large;
  position: relative;
  top:50%;
  transform:translateY(-50%);
}
.style2{
  float: right;
  height: 30px;
  position: relative;
  top:35%;
  transform:translateY(-50%);
  border-radius: 30%;
}
.style3{
  float: left;
  height: 30px;
  position: relative;
  top:35%;
  transform:translateY(-50%);
  border-radius: 30%;
}
/*.el-table__header .has-gutter tr .el-table-column--selection .cell .el-checkbox:before{*/
/*  content: "全选  ";*/
/*}*/
.content2 {
  margin-bottom: 18px;
  position: relative;
}
label {
  font-size: 14px;
  width: 96px;
  text-align: right;
  display: inline-block;
}
input {
  width: 270px;
  height: 38px;
  padding-left: 8px;
  box-sizing: border-box;
  margin-left: 5px;
  outline: none;
  border: 1px solid #999;
}
.el-dialog__title{
  line-height: 100px;
  font-size: 35px;
  font-family: 楷体;
}


</style>